<template>
	<view>
		<view class="apply-goods">
			请选择开票商品
		</view>
		<view class="goods">
			<view class="item">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell uni-list-cell-pd label" v-for="(item,index) in items" :key="index" @click="goodsSelect(index,item)" >
						<view class="goods-name" :class="[item.isInvoice==1?'gray':'',{'active':item.checked}]" >{{item.productName}}</view>
						<view>
							<checkbox v-if="item.isInvoice==0"  :checked="item.checked" class="checkbox" color="#077840" />
						</view>

					</label>
				</checkbox-group>
			</view>
		</view>
		  <view class="confirm" @click="confirm">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [],
				rSelect: [],
				orderId:0,
				id:[],
				product:[]
			};
		},
		onShareAppMessage(option) {
			return {
				title: '上云丰花卉',
				path: '/pages/index/index'
			}
		},
		onShareTimeline(option){
			return {
				title: '上云丰花卉',
				path:'/pages/index/index'
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
			console.log(this.orderId);
			uni.$on('upApply',(data)=>{
				this.invoiceGoods()
			})
			this.invoiceGoods()
		},
		methods: {
			invoiceGoods(){
				let self = this;
				let orderId = self.orderId;
				self._get(
					"user/order/detail", {
						orderId: orderId,
					},
					function(res) {
						const { product } = res.data;
						self.product = product;
						self.items = self.product.map(item=>{
							item.checked=false
							return item
						})
					}
				);
				
			},
			// 多选框
			checkboxChange: function(e) {
				console.log(12);
				// var items = this.items,
				//   values = e.detail.value;
				// 	console.log(values);
				// 	this.id = values
				// for (var i = 0, lenI = items.length; i < lenI; ++i) {
				// 	const item = items[i]
				// 	if (values.includes(item.value)) {
				// 		this.$set(item, 'checked', true)
				// 	} else {
				// 		this.$set(item, 'checked', false)
				// 	}
				// }
			
			},
			goodsSelect(index,item){
				console.log(123);
				if(item.isInvoice==1){
					uni.showToast({title: '商品已开过发票'});
				}else{
					item.checked=!item.checked
				}
				// if (this.rSelect.indexOf(e) == -1) {
				// console.log(e)//打印下标
				// this.rSelect.push(e);//选中添加到数组里
				// } else {
				// this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
				// }
				// console.log(item.id);
				
			},
			confirm(){
				// console.log(this.id);
				let dis=[]
				this.items.forEach(item=>{
					console.log(item);
					if(item.checked){
						dis.push(item.orderProductId)
					}
				})
				// console.log(dis);
				if(dis.length==[]) {
					uni.showToast({title: '请选择开发票的商品'});
				}else {
					uni.navigateTo({
						url:'/orderpages/order/FillInvoice?id=' + JSON.stringify(dis) +'&orderId=' + this.orderId
					})	
				}
				
			}
		}
	
	}
</script>
<style lang="less">
		page {
			background-color: #F9F9F9;
		}
	
	</style>
<style lang="less" scoped>

	.apply-goods {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.goods {
		background-color: #fff;

		.item {
			width: 690rpx;
			margin: 0 auto;
			// height: 100rpx;
			// padding: 0 30rpx;
			// box-sizing: border-box;
			

			.goods-name {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.active {
				color: #077840;
			}
			.gray {
				color: #999999;
			}
		}
	}
	.confirm {
		width: 630rpx;
		height: 96rpx;
		background: #077840;
		border-radius: 8rpx;
		margin: 0 auto;
		font-size: 32rpx;
		line-height: 96rpx;
		text-align: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 30rpx;
	
	}
	/deep/.uni-list-cell.uni-list-cell-pd.uni-label-pointer {
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;
		height: 100rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #EEE;
	}
	.checkbox {
		border: 0;
	}
	/deep/.uni-list-cell.uni-list-cell-pd.uni-label-pointer:last-child {
		border-bottom: 0;
	}
	
	/deep/.uni-checkbox-input.uni-checkbox-input-checked {
		vertical-align: middle;
		border: 0;
	}
	
	/deep/.uni-checkbox-input-checked {
		color: #077840 !important;
	}
	/deep/.uni-checkbox.uni-checkbox-input {
		border: 0;
	}
	/deep/uni-checkbox .uni-checkbox-input {
		border: 0;
	}
	.label{
		height: 98rpx;
		line-height: 98rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #EEE;
	}
</style>
